<style scoped lang="scss">
  .Object-header {
    display:flex;
    justify-content: flex-start;
    align-items: center;
    height:32px;
  }
  .Object-title {
    display: flex;
    width:100%;
    height:100%;
    justify-content: space-between;
    align-items: center;
    background-color: #f7f7f7;
    border-radius: 2px;
    //background-color: #f7f7f7;
    border: 1px solid #dcdee2;
  }
  .Object-expand {
    margin-right: 14px;
  }
  .Object-mark {
    width:5px;
    height:32px;
    background-color: #2d8cf0;
    border-color: #2d8cf0;
    margin-right:2px;
  }
  .Object-action {
    width:20px;
    margin-left: 5px;
    margin-right: 5px;
    cursor: pointer;
  }
</style>
<template>
  <div class="Object-header">
    <div class="Object-mark"></div>
    <div class="Object-title">
      <span>
        <Icon class="Object-expand" :type="expand?'ios-arrow-down':'ios-arrow-forward'" @click="$emit('expand',expand)"/>
        <slot><span :style="titleStyle">{{title}}</span></slot>
      </span>
      <div v-if="editable" class="Object-action" @click="$emit('remove')">-</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "starTemplateMapHeader",
  data(){
    return {

    }
  },
  props:{
    title:{
      default:()=>{
        return 'title';
      }
    },
    titleStyle:{
      default:()=>{
        return {};
      }
    },
    expand:{
      default:()=>{
        return false;
      }
    },
    editable:{
      default:()=>{
        return false;
      }
    },
  },
  mounted() {

  },
  watch: {

  },
  methods:{

  }
}
</script>